<!DOCTYPE html>
<style>
     div {
          width: 250px;
          height: 250px;
          border: 1px solid black;
     }
     .linear-gradient.a {
          background: linear-gradient(transparent, blue 10px);
     }
     .linear-gradient.b {
          background: linear-gradient(transparent, blue 100px);
     }
     .radial-gradient.a {
          background: radial-gradient(transparent, blue 10px);
     }
     .radial-gradient.b {
          background: radial-gradient(transparent, blue 100px);
     }
</style>
<div class="linear-gradient a"></div>
<div class="linear-gradient b"></div>
<div class="radial-gradient a"></div>
<div class="radial-gradient b"></div>